今日呢，筆者想把昨天在腦中釐清的一件事寫下來：前端（Vue）跟後端（Express）到底怎麼「互相認得」？
答案其實很單純——我們用一份 API Contract (合約) 溝通：Method + Path + JSON + Status Code。沒有自動魔法，都是我們自己約定好的規則。那就開始吧！

什麼是「API Contract 合約」？

An API contract is needed because it serves as a formal agreement outlining how different software or services should interact with each other. This agreement defines rules, specifications, and expectations for data exchange, functionality, and communication.

• Adobe - API contract: What it is and how to use it (examples)

我們可以將API Contract拆成四個部分：

1. Method：你要做的動作（GET/POST/PUT/PATCH/DELETE…）。
2. Path：你在哪個網址提供服務（例如 /api/auth/signup）。
3. JSON：雙方約定好請求/回應的資料格式。
4. Status Code：結果狀態（200/201/409/500…）。

只要前端和後端對這四件事有一致共識，彼此就能順利對話。（HTTP 方法的性質像是 idempotent / safe 等，MDN 有整理成表。）

常見 Method

• GET：讀資料（可快取、idempotent）
• POST：新增資料（通常回 201）
• PUT：整筆更新（idempotent）
• PATCH：部分更新
• DELETE：刪除（idempotent）
  更完整的定義、差異與分類（safe/idempotent/cacheable）可見 MDN - Overview of HTTP。

後端路由怎麼對應？

在 Express 中，我們用 路由（route） 把「Method + Path」對應到一段處理邏輯，例如 app.post('/api/auth/signup', handler)。同時也能把相關路由拆進 Router 來模組化。關於這部份可以參考官方的路由教學。

前端怎麼找到後端？

瀏覽器有 同源政策（SOP）：不同來源（網域/通訊協定/埠）之間，前端 JS 不能隨便讀取回應。要跨來源時，就需要 CORS（伺服器以 HTTP 標頭宣告允許哪些來源）。

在開發階段，我會用 Vite 的 proxy：把 /api/* 代理到後端（例如http://localhost:3000），前端就能直接 fetch('/api/…')，而不需要處理 CORS。官方的 server 選項文件有說明。